<template>
  <div class="dashboard-editor-container">
    <!-- 数据显示 -->
    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <!-- 数据走向 -->
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
  </div>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  import LineChart from './components/LineChart'
  import {
    getChartData
  } from '@/api/dashboard'

  let lineChartData = {
    admin: {
      actualData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    },
    order: {
      actualData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    },
    house: {
      actualData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    }
  }

  export default {
    name: 'DashboardAdmin',
    components: {
      PanelGroup,
      LineChart,
    },
    props: {
      role: {
        type: String,
        default: 'null'
      },
    },
    data() {
      return {
        lineChartData: lineChartData.admin
      }
    },
    created() {
      this.getChartData()
      this.handleSetLineChartData('admin')
    },
    watch: {
      lineChartData(newValue, oldValue) {
        console.log(oldValue)
        console.log(newValue)
      }
    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      getChartData() {
        getChartData()
          .then(res => {
            if (res.code === 1) {
              const {
                admin,
                house,
                order
              } = res.data
              for (var i = 1; i <= 12; i++) {
                if (admin[i] !== undefined) {
                  lineChartData.admin.actualData[i - 1] = admin[i]
                }
                if (house[i] !== undefined) {
                  lineChartData.house.actualData[i - 1] = house[i]
                }
                if (order[i] !== undefined) {
                  lineChartData.order.actualData[i - 1] = order[i]
                }

              }
            }
          })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    position: relative;


    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
